<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>WebRiders Photowall Example</title>
    
	<style type="text/css">
		html, body {
			height: 100%;
			margin: 0;
			padding: 0;
		}
	
        #container {
			height: 100%;
			background: #141414;
			position: relative;
		}
    </style>
	
	<!-- jQuery + UI -->
	<script type="text/javascript" src="required/jquery/jquery-1.4.2.js"></script>
	<script type="text/javascript" src="required/jquery-overscroll/jquery.overscroll.js"></script>
	<script type="text/javascript" src="required/jquery-ui/jquery-ui-1.8.2.custom.js"></script>
	
	<!-- WebRiders -->
	<link rel="stylesheet" type="text/css" href="sources/styles/photowall/theme-one.css" />
	<script type="text/javascript" src="required/webriders/webriders-0.9.js"></script>
	<!-- Photowall: DEV parts -->
	<script type="text/javascript" src="sources/core.js"></script>
	<script type="text/javascript" src="sources/items.js"></script>
	<script type="text/javascript" src="sources/toolbar.js"></script>
	<script type="text/javascript" src="sources/item-editor.js"></script>
	
	<script type="text/javascript">
		$(function() {
			
			//var pw = new WebRiders.ui.PhotoWall('#container'); 
			window.pw = new WebRiders.ui.PhotoWall({ container: '#container', editable: true });
			pw.render();
			//pw.setEditable(true);
			//pw.toolbar.toggleToolbar(true);
			
			pw.addPhoto(['demos/photos/kottenator.jpg','demos/photos/sheva.jpg']);
			pw.photos.get(0).updateUI({x: 475, y: 40});
			pw.photos.get(1).updateUI({x: 600, y: 400});
			
			// ID is very important to use AJAX saving
			pw.addPhoto({ id: 1, url: 'demos/photos/lviv.jpg', x: 40, y: 320, title: 'Lviv is beautiful!' });
			
			pw.addCategory('<b>Lviv 2009</b>');
			pw.categories.get(0).updateUI({x: 170, y: 130});
			
			pw.addCategory({ title: 'In the museum', x: 1695, y: 530 });
			pw.addPhoto([
				{ id: 22, url: 'demos/photos/old-car.jpg', x: 2040, y: 35 },
				{ id: 34, url: 'demos/photos/quartet-monkey.jpg', x: 1200, y: 300 },
				{ id: 35, url: 'demos/photos/quartet-goat.jpg', x: 1930, y: 400 },
				{ id: 36, url: 'demos/photos/quartet-wolf.jpg', x: 1530, y: 135 },
				{ id: 37, url: 'demos/photos/quartet-jack.jpg', x: 1530, y: 645 },
				{ id: 38, url: 'demos/photos/old-woman.jpg', x: 2045, y: 765 }
			]);
			
			pw.addPhoto([
				{ id: 45, url: 'demos/photos/hyosung.jpg', x: 1045, y: 1020 },
				{ id: 48, url: 'demos/photos/bike-lamp.jpg', x: 140, y: 1065 },
				{ id: 60, url: 'demos/photos/small-bike.jpg', x: 700, y: 935 },
				{ id: 64, url: 'demos/photos/strange-bike.jpg', x: 1300, y: 1190 }
			]);
		});
		
		// Some script parts are depends on next cssPath constant. 
		// It's auto-detected and relies on subpath: "/photowall/theme-one.css"
		// But something may change and link will become broken
		// It's not a big deal if it's broken - just cursors will disappear, and lazy-loading icon...
		// But you may override it:
		// ------
		// WebRiders.ui.PhotoWall.cssPath = '/path/to_where/photowall_css/is_placed/';
	</script>
</head>

<body>

<div id="container">
</div>

</body>

</html>


